<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item :label="item.label" :name="item.name" :key="item.label" :required="item.required" v-for="item in editForm">
          <uni-data-checkbox v-if="item.type === 'select'" v-model="user[item.name]" :localdata="item.items" />
          <uni-data-picker
            v-else-if="item.type === 'address'"
            :value="user[item.name]"
            :localdata="addressItems"
            @change="onChange"></uni-data-picker>
          <uni-easyinput
            v-else
            v-model="user[item.name]"
            :placeholder="`请输入${item.label}`"
            :suffixIcon="item.suffixIcon"
            :prefixIcon="item.prefixIcon" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      user: {},
      editForm: [
        {
          label: '用户昵称',
          name: 'username',
          required: true,
        },
        {
          label: '邮箱',
          name: 'email',
          required: true,
        },
        {
          label: '性别',
          name: 'sex',
          type: 'select',
          required: true,
          items: [
            {
              text: '男',
              value: 1,
            },
            {
              text: '女',
              value: 0,
            },
            {
              text: '保密',
              value: 2,
            },
          ],
        },
        {
          label: 'QQ',
          name: 'qq',
          required: false,
        },
        {
          label: '微信号',
          name: 'wechat',
          required: false,
        },
        {
          label: '地址',
          name: 'address',
          required: true,
        },
      ],
      rules: {
        username: {
          rules: [
            {
              required: true,
              errorMessage: '用户昵称不能为空',
            },
          ],
        },
        email: {
          rules: [
            {
              required: true,
              errorMessage: '邮箱地址不能为空',
            },
            {
              format: 'email',
              errorMessage: '请输入正确的邮箱地址',
            },
          ],
        },
        address: {
          rules: [
            {
              required: true,
              errorMessage: '地址不能为空',
            },
          ],
        },
      },
      addrDel: {},
      addressItems: [],
    }
  },

  onReady() {
    this.user = this.userInfo
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    submit(ref) {
      this.$refs.form.validate().then((res) => {
        this.$store.dispatch('user/updateUser', this.user).then((response) => {
          if (response.success) {
            this.$modal.msgSuccess('修改成功')
          } else {
            this.$modal.msgError('修改失败!')
          }
        })
      })
    },
    onChange(e) {
      console.log('选中的值：', e.value)
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}
</style>
